<template>
    <div style="text-align:center;
         width:100%;
         position: relative;
         top: 4vh;
         margin: 0 auto 0 auto;
         border-radius: 44px;
         padding: 1vh">
        <mu-button :style="getStyle(left)"
                   v-on:click="$emit('leftClick')">
            按赞排序
        </mu-button>
        <mu-button :style="getStyle(right)"
                   v-on:click="$emit('rightClick')">
            时间排序
        </mu-button>
    </div>
</template>

<script>
    export default {
        name: "SortSelectButton",
        props: {
            left: String,
            right: String
        },
        data() {
            return {
                activate_true: {
                    color: 'white',
                    backgroundColor: 'black'
                },
                activate_false: {
                    color: 'black',
                    backgroundColor: 'white'
                }
            }
        },
        methods: {
            getStyle(act) {
                if (act === 'true') {
                    return this.activate_true
                }
                return this.activate_false
            }
        }
    }
</script>

<style scoped>
</style>